<script lang='ts' setup>
import { reactive, computed,ref} from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { regionData } from 'element-china-area-data'
import type { FormInstance, FormRules } from 'element-plus'

const state = reactive({ 
	param: {
		time: '',
		six: '',
		name: '',
		phone: '',
		idCard: '',
		age: '',
		marital: '',
		nation: '',
		jobStatus: 1,
		birthday: '',
		jobType: '',
		calendar: false,
		education: '',
		speciality: '',
		year: 1,
		address: '',
		addressDetail: '',
		nowAddress: '',
		nowAddressDetail: '',
		emergencyContact: []
	},
	query: {

	},
	tableData: [
		{
			id: 1,
			store: '',
			job: ''
		}
	],
	storeList: [
		{ value: 1, label: '加盟【演示】美咚美业旗舰店（正常）' },
		{ value: 2, label: '直营美咚美业美云狐店（正常）' },
		{ value: 3, label: '加盟美咚美业美云狐店（正常）' },
		{ value: 4, label: '直营三桥旗舰店（正常）' }
	],
	jobList: [
		{ value: 1, label: '超级管理员 - 总部' },
		{ value: 2, label: '测试总部岗 - 总部' },
		{ value: 3, label: '无首页岗位 - 总部' }, 
	],
	sixList: [
		{ value: 1, label: '男' },
		{ value: 2, label: '女' },
	],
	maritalStatus: [
		{ value: 1, label: '未婚' },
		{ value: 2, label: '已婚' },
	],
	nationList: [
		{ value: 1, label: '汉族' },
		{ value: 2, label: '苗族' },
	],
	jobTypeList: [ 
		{ value: 2, label: '总部岗' },
		{ value: 3, label: '门店岗' }
	],
	educationList: [ 
		{ value: 2, label: '小学' },
		{ value: 3, label: '初中' },
		{ value: 4, label: '高中' },
		{ value: 5, label: '大专' },
		{ value: 6, label: '本科' },
		{ value: 7, label: '研究生' },
		{ value: 8, label: '博士研究生' }
	],
	emergencyContactList: [ 
		{ value: 2, label: '配偶' },
		{ value: 3, label: '父亲' },
		{ value: 4, label: '母亲' },
		{ value: 5, label: '儿子' },
		{ value: 6, label: '女儿' },
		{ value: 7, label: '兄弟' },
		{ value: 8, label: '姐妹' },
		{ value: 9, label: '爷爷' },
		{ value: 10, label: '奶奶' },
		{ value: 11, label: '其他' } 
	],
}) 

const disabled = ref(false)
const ruleFormRef = ref<FormInstance>()
const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean, 
	title: string
}>(), { 
	title: '',
	id: 0
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const rules = reactive<FormRules<any>>({
	name: [ { required: true, message: '请输入姓名', trigger: 'blur', }, ],
	six: [ { required: true, message: '请选择时间', trigger: 'change', }, ],
	phone: [ { required: true, message: '请输入联系方式', trigger: 'blur', }, ],
	idCard: [ { required: true, message: '请输入身份证号码', trigger: 'blur', }, ],
	jobStatus: [ { required: true, message: '请选择岗位类型', trigger: 'change', }, ],
	nation: [ {  required: true, message: '请选择民族', trigger: 'change', }, ],
	jobType: [ {  required: true, message: '请选择岗位类型', trigger: 'change', }, ],
	marital: [ {  required: true, message: '请选择岗位类型', trigger: 'change', }, ],
})

const contactPeple = computed(() => {
	let res = [] as Array<{relation: string, name: string, brithday: string, contact: string, calendar: boolean}>
	state.emergencyContactList.forEach(item => {
		state.param.emergencyContact.forEach(i => {
			if(item.value === i) {
				res.push({
					name: '',
					relation: item.label,
					brithday: '',
					contact: '',
					calendar: false
				})
			}
		})
	})
	return res || []
})


const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
		console.log('submit!')
		} else {
		console.log('error submit!', fields)
		}
	})
}

const deleteHadle = (row: any) => {
	state.tableData = state.tableData.filter(item => item.id != row.id)
}

const add = () => {
	state.tableData.push({
		id: (state.tableData.length + 1) * (Math.random() * 1000),
		job: '',
		store: ''
	})
}

const handleRemove = (file: any) => {

}

const selectAllStore = () => {
	
}

const selectJobs = () => {
	
}

const handleChange = () => {
    
}

const contactChange = (list: Array<number>) => {
	
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.title}编辑员工信息`" @close="closeDialog" style="width: 1200px;" center>
            <section>
				<el-scrollbar max-height="400px" always>
					<section style="margin-right: 20px;">
						<h3 class="color-primary mb20">基本信息</h3>
						<el-form
							ref="ruleFormRef"
							:model="state.param"
							:rules="rules"
							label-width="120px"
							class="demo-ruleForm"
							  
							status-icon
						>
							<el-row :gutter="0" class="mb20">
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="真实姓名" prop="name">
										<el-input v-model="state.param.name" placeholder="输入员工真实姓名" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="性别" prop="six">
										<el-select v-model="state.param.six" placeholder="请选择性别" class="w100">
											<el-option v-for="item in state.sixList" :key="item.value"
												:label="item.label" :value="item.value" />
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="联系方式" prop="phone">
										<el-input v-model="state.param.phone" placeholder="输入员工名或手机号" clearable></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="0" class="mb20">
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="身份证号" prop="idCard">
										<el-input v-model="state.param.idCard" placeholder="输入员工身份证号" clearable></el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="生日">
										<el-date-picker v-model="state.param.birthday" label="Pick a time" placeholder="请选择时间" style="width: 70%" />&emsp;
										<el-checkbox v-model="state.param.calendar" label="农历" />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="年龄">
										<el-input v-model="state.param.age" placeholder="输入员工年龄" clearable></el-input>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row :gutter="0" class="mb20">
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="婚姻状况" prop="marital">
										<el-select v-model="state.param.marital" placeholder="请选择员工婚姻状况" class="w100">
											<el-option v-for="item in state.maritalStatus" :key="item.value"
												:label="item.label" :value="item.value" />
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="民族" prop="nation">
										<el-select v-model="state.param.nation" placeholder="请选择民族" class="w100">
											<el-option v-for="item in state.nationList" :key="item.value"
												:label="item.label" :value="item.value" />
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="在职状态" prop="jobStatus">
										<el-radio-group v-model="state.param.jobStatus">
											<el-radio :label="1">在职</el-radio>
											<el-radio :label="2" disabled>离职</el-radio> 
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row :gutter="0" class="mb20">
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="入职时间" prop="time">
										<el-date-picker v-model="state.param.time" label="Pick a time" placeholder="请选择时间" style="width: 100%" />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" ></el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="岗位类型" prop="jobType">
										<el-select v-model="state.param.jobType" placeholder="请选择岗位类型" class="w100">
											<el-option v-for="item in state.jobTypeList" :key="item.value"
												:label="item.label" :value="item.value" />
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row :gutter="0" class="mb20">
								<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" >
									<el-form-item label="关联门店">
										<el-table :data="state.tableData" style="width: 100%" :show-header="false" > 
											<el-table-column label="" prop="job">
												<template #default="scope">
													<el-select v-model="scope.row.store" placeholder="请选择员工类型" class="w100">
														<el-option v-for="item in state.storeList" :key="item.value"
															:label="item.label" :value="item.value" />
													</el-select>
												</template>
											</el-table-column>
											<el-table-column label="" prop="job">
												<template #default="scope">
													<el-select v-model="scope.row.job" placeholder="请选择员工类型" class="w100">
														<el-option v-for="item in state.jobList" :key="item.value"
															:label="item.label" :value="item.value" />
													</el-select>
												</template>
											</el-table-column>
											<el-table-column label="" prop="job" width="100">
												<template #default="scope">
													<el-button @click="deleteHadle(scope.row)">删除</el-button>
												</template>
											</el-table-column>
										</el-table>
										<section class="mt20">
											<el-button @click="add">+ 新增关联门店</el-button>&emsp;
											<el-link :underline="false" type="primary" @click="selectAllStore">一键全选门店</el-link>&emsp;
											<el-link :underline="false" type="primary" @click="selectJobs">批量选择岗位</el-link>
										</section>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>

						<h3 class="color-primary mb20">职业技能</h3>

						<section>
							<el-form
								ref="ruleFormRef"
								:model="state.param"
								:rules="rules"
								label-width="120px"
								class="demo-ruleForm"
								  
								status-icon
							>
								<el-row :gutter="20" class="mb20">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="学历" >
											<el-select v-model="state.param.education" placeholder="请选择学历" class="w100"   >
												<el-option v-for="item in state.educationList" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="专业">
											<el-input v-model="state.param.speciality" placeholder="输入专业" clearable   ></el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="工作时间">
											<el-input-number v-model="state.param.year" :min="1" :max="10"  />&emsp;年
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</section>

						<h3 class="color-primary mb20">其他信息</h3>
						<section>
							<el-form label-width="120px"  status-icon >
								<el-row :gutter="20" class="mb20">
									<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
										<el-form-item label="身份证正面">
											<el-upload action="#" list-type="picture-card" :auto-upload="false">
												<el-icon><Plus /></el-icon> 
												<template #file="{ file }">
													<div>
														<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
														<span class="el-upload-list__item-actions"> 
															<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
																<el-icon><Delete /></el-icon>
															</span>
														</span>
													</div>
												</template>
											</el-upload>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
										<el-form-item label="身份证反面">
											<el-upload action="#" list-type="picture-card" :auto-upload="false">
												<el-icon><Plus /></el-icon> 
												<template #file="{ file }">
													<div>
														<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
														<span class="el-upload-list__item-actions"> 
															<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
																<el-icon><Delete /></el-icon>
															</span>
														</span>
													</div>
												</template>
											</el-upload>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10" class="mb20">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="户籍地" >
											<el-cascader style="width: 500px;"
											 placeholder="请选择地址"
											:options="regionData"
											v-model="state.param.address"
											@change="handleChange">
											</el-cascader>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="" label-width="20px">
											<el-input v-model="state.param.addressDetail" placeholder="请输入户籍地" clearable   ></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10" class="mb20">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="现居地" >
											<el-cascader style="width: 500px;"
											 placeholder="请选择地址"
											:options="regionData"
											v-model="state.param.nowAddress"
											@change="handleChange">
											</el-cascader>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="" label-width="20px">
											<el-input v-model="state.param.nowAddressDetail" placeholder="请输入现居住" clearable   ></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10" class="mb20">
									<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
										<el-form-item label="紧急联系人" >
											<el-select
												v-model="state.param.emergencyContact"
												multiple collapse-tags collapse-tags-tooltip
												placeholder="请选择紧急联系人" style="width: 100%" clearable @change="contactChange">
												<el-option
													v-for="item in state.emergencyContactList"
													:key="item.value"
													:label="item.label"
													:value="item.value"
												/>
												</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10" class="mb20" v-if="contactPeple && contactPeple.length">
									<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20" >
										<el-form-item label="联系人信息" >
											<el-table :data="contactPeple" style="width: 100%" border> 
												<el-table-column label="关系" prop="relation" width="100" />
												<el-table-column label="姓名" prop="relation">
													<template #default="scope">
														<el-input v-model="scope.row.name" placeholder="请输入姓名" clearable ></el-input>
													</template>	
												</el-table-column>
												<el-table-column label="姓名" prop="relation">
													<template #default="scope">
														<el-date-picker v-model="scope.row.birthday" label="Pick a time" placeholder="请选择时间" style="width: 65%" />&emsp;
														<el-checkbox v-model="scope.row.calendar" label="农历" />
													</template>	
												</el-table-column>
												<el-table-column label="联系方式" prop="relation">
													<template #default="scope">
														<el-input v-model="scope.row.contact" placeholder="请输入联系方式" clearable ></el-input>
													</template>	
												</el-table-column>
											</el-table>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</section>
					</section>
				</el-scrollbar>
				<section style="text-align: center" class="mt20">
					<el-button type="primary" @click="submitForm(ruleFormRef)">
						确定
					</el-button>
					<el-button @click="closeDialog">取消</el-button>
				</section>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>

</style>